<template>
	<view class="music-head">
		<view class="music-head-icon" v-show="isShow">
			<text class="iconfont icon-zuojiantou"  @tap="hendleToBack"></text> | 
			<text class="iconfont icon-shouye" @tap="hendleToHome"></text>
		</view>
		<view class="titleBox">
			{{title}}
		</view>
	</view>
</template>

<script>
	import{ ref } from 'vue'
	import {onLoad} from '@dcloudio/uni-app';
	export default {
		props:{
			isShow: Boolean,
			title: String,
			isPlay: Number,
			pid: String
		},
		setup(props) {
			let hendleToHome = () => {
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
			
			let hendleToBack = () => {
				if(props.isPlay === 2){
					uni.navigateTo({
						url:'/pages/index/index'
					})
				} else if(props.isPlay === 1){
					uni.navigateTo({
						url: `../list/index?id=${props.pid}`
					})
				} else if(props.isPlay === 3){
					history.back()
				} else if (props.isPlay === 4){
					uni.navigateTo({
						url: `/pages/search/search`
					})
				}
			}
			
			return{
				hendleToHome,
				hendleToBack
			}
		}
	}
</script>

<style>
	.music-head{
		height: 75px;
		width: 100%;
		font-size: 16px;
		line-height: 80px;
		text-align: center;
		color: #000;
		position: relative;
		display: fixed;
	}
	.music-head-icon{
		position: absolute;
		left: 4px;
		top: 26px;
		width: 90px;
		height: 31px;
		background-color: rgba(0,0,0,0.4);
		color: white;
		line-height: 31px;
		border-radius: 15px;
		display: flex;
		justify-content: space-evenly;
	}
	.music-head-icon text{
		margin-top: 2px;
	}
	.titleBox{
		margin: 0 auto;
		width: 100px;
		height: 75px;
		overflow: hidden;
		text-overflow: ellipsis; 
		white-space:nowrap;
	}
</style>